<template>
  <div id="home-wrapper">
      <header class="home-header wrap" :class="{'active': state.headerScroll}">
          <router-link to="/category">
              <i class="nbicon nbmenu2"></i>
          </router-link>
          <div class="header-search">
              <span class="app-name">新蜂商城</span>
              <i class="nbicon nbSearch"></i>
              <router-link 
                  class="search-title"
                  to="/product-list?from=home"
              >
              山河无恙，人间皆安
              </router-link>
          </div>
          <router-link class="login" to="/login">登录</router-link>
      </header>
      <div class="block"></div>
      <NavBar></NavBar>
      <swiper :list="state.swiperList"/>
      <section class="category-list">
        <div v-for="item in state.categoryList" :key="item.categoryId">
            <img :src="item.imgUrl">
            <span>{{ item.name }}</span>
        </div>
      </section>
      <section class="goods">
        <header class="goods-header">新品上线</header>
        <van-skeleton title :row="3" :loading="state.loading">
            <!-- slot 插槽 -->
            <div class="goods-box">
                <goods-item 
                v-for="item in state.newGoodses"
                :key="item.goodsId" 
                @click="gotoDetail(item.goodsId)"
                :goods="item"/>
            </div>
        </van-skeleton>
      </section>
      <section class="goods">
        <header class="goods-header">热销商品</header>
        <van-skeleton title :row="3" :loading="state.loading">
            <!-- slot 插槽 -->
            <div class="goods-box">
                <goods-item 
                v-for="item in state.hotGoodses"
                :key="item.goodsId" 
                :goods="item"/>
            </div>
        </van-skeleton>
      </section>
      <section class="goods">
        <header class="goods-header">推荐商品</header>
        <van-skeleton title :row="3" :loading="state.loading">
            <!-- slot 插槽 -->
            <div class="goods-box">
                    <goods-item
                        v-for="item in state.recommendGoodses" 
                        :key="item.goodsId"
                        :goods="item"/>
                </div>
        </van-skeleton>
      </section>
  </div>
</template>

<script setup>
// import SubHeader from '../components/SubHeader.vue';
import { onMounted, reactive, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { getHomeData } from '../service/home'
import { showLoadingToast, closeToast } from 'vant'
import NavBar from '~/Navbar.vue'
import swiper from '~/Swiper.vue'
import GoodsItem from '~/GoodsItem.vue'
import _ from 'lodash'
// es8 异步的高级能力 async await
// 挂载后再发送api 请求, 提升性能,  不会去争抢挂载显示
// data 响应式的数据
// 数据的值对应当前的组件状态
// 值会改变 对应新的状态
// 数据和组件的状态是一一对应关系的

const router = useRouter() // 把全局的路由对象给我们
const state = reactive({
    headerScroll: false,
    swiperList: [],
    newGoodses: [],
    hotGoodses: [],
    recommendGoodses: [],
    loading: true,
    categoryList: [
    {
      name: '新蜂超市',
      imgUrl: 'https://s.yezgea02.com/1604041127880/%E8%B6%85%E5%B8%82%402x.png',
      categoryId: 100001
    }, {
      name: '新蜂服饰',
      imgUrl: 'https://s.yezgea02.com/1604041127880/%E6%9C%8D%E9%A5%B0%402x.png',
      categoryId: 100003
    }, {
      name: '全球购',
      imgUrl: 'https://s.yezgea02.com/1604041127880/%E5%85%A8%E7%90%83%E8%B4%AD%402x.png',
      categoryId: 100002
    }, {
      name: '新蜂生鲜',
      imgUrl: 'https://s.yezgea02.com/1604041127880/%E7%94%9F%E9%B2%9C%402x.png',
      categoryId: 100004
    }, {
      name: '新蜂到家',
      imgUrl: 'https://s.yezgea02.com/1604041127880/%E5%88%B0%E5%AE%B6%402x.png',
      categoryId: 100005
    }, {
      name: '充值缴费',
      imgUrl: 'https://s.yezgea02.com/1604041127880/%E5%85%85%E5%80%BC%402x.png',
      categoryId: 100006
    }, {
      name: '9.9元拼',
      imgUrl: 'https://s.yezgea02.com/1604041127880/9.9%402x.png',
      categoryId: 100007
    }, {
      name: '领劵',
      imgUrl: 'https://s.yezgea02.com/1604041127880/%E9%A2%86%E5%88%B8%402x.png',
      categoryId: 100008
    }, {
      name: '省钱',
      imgUrl: 'https://s.yezgea02.com/1604041127880/%E7%9C%81%E9%92%B1%402x.png',
      categoryId: 100009
    }, {
      name: '全部',
      imgUrl: 'https://s.yezgea02.com/1604041127880/%E5%85%A8%E9%83%A8%402x.png',
      categoryId: 100010
    }
  ],
})

const gotoDetail = (id) => {
  // /detail/:id 
  // console.log(id, 'gotoDetail');
  // console.log(router, '///');
  router.push({
      path: `/detail/${id}`
  })

}

onMounted(async () => { // 使用了异步同步化的高级技巧
    showLoadingToast({
        message: '加载中...',
        forbidClick: true
    })
    // 后台接口数据
    const { data } = await getHomeData() // await promise  api serverice
    // console.log(data);
    state.swiperList = data.carousels;
    state.newGoodses = data.newGoodses;
    state.hotGoodses = data.hotGoodses;
    state.recommendGoodses = data.recommendGoodses;
    state.loading = false;
    closeToast();
    // console.log(state.swiperList);
})
// state响应式
// onMounted, await  getHomeData
// state.loading = false
// 热更新 耗时的 dom 更新
// 什么时候快递到了, 热更新已经完成了 
nextTick(() => {
  // 组件挂载了,  且数据绑定模板 已到位
  const setHeaderScroll = () => {
    let scrollTop = window.pageYOffset || document.documentElement || document.body.scrollTop 
      // console.log(scrollTop);
      scrollTop > 100 ? state.headerScroll = true : state.headerScroll = false
  }
  window.addEventListener('scroll', _.throttle(setHeaderScroll, 200))
})
</script>

<style lang="stylus" scoped>
@import '../common/style/mixin'
// 可以一次性设置widht height 的mixin 混合
// stylus 提供的tab 缩进 css 提供了模块化的能力？  
#home-wrapper
    padding-bottom 2rem
.block
    height 1.33333rem
.home-header
    position fixed
    top 0
    left 0    
    line-height 1.33333rem
    padding 0 .4rem
    font-size 0.4rem
    color #fff
    z-index 10000
    opacity 1
    wh(100%, 1.33333rem)
    fj()
    .nbmenu2
        color $primary
    &.active
        background $primary
        .nbmenu2
            color #fff
        .login
            color #fff
    .header-search 
        display flex
        width 74%
        box-sizing content-box
        height 0.53333rem
        line-height 0.53333rem
        margin 0.26667rem 0
        padding 0.1333rem 0
        color #232326
        border-radius .53333rem
        background rgba(255, 255, 255, .7)
        .app-name
            padding 0 0.26667rem
            color $primary
            font-size 0.53333rem
            font-weight bold
            border-right .026667rem solid #666
        .icon-search
            padding 0 .26667rem
            font-size .45333rem
        .search-title
            font-size .32rem
            color #666
            line-height 0.56rem
    .login
        color $primary
        line-height 1.38667rem

.category-list
    display flex
    flex-shrink 0
    flex-wrap wrap
    width 100%
    padding-bottom .34667rem
    div
        display flex
        flex-direction column
        width 20%
        text-align center
        img
            wh(.96rem, .96rem)
            margin .346667rem auto .213333rem auto
.goods
    .goods-header
        background #f9f9f9
        height 1.3333rem
        line-height 1.3333rem
        text-align center
        color $primary
        font-size .426667rem
        font-weight 500
    .goods-box
        fj(flex-start)
        flex-wrap wrap
       
</style>